<template>
  <div>
    <el-form ref="form" :rules="rules" :model="form" label-width="80px" label-position="left">
      <el-row :gutter="20">
        <el-col :span="16">
          <el-form-item label="项目名称" prop="xmId">
            <el-select v-model="form.xmId" class="filter-item" filterable placeholder="项目" style="width: 100%" clearable>
              <el-option v-for="item in xmList" :key="item.id" :label="item.xiangmumingcheng" :value="item.id" />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="公告类型" prop="type">
            <el-select v-model="form.type" clearable style="width:100%;">
              <el-option v-for="item in fenleiList" :key="item.code" :label="item.name" :value="item.code" />
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="16">
          <el-form-item label="公告标题" prop="title">
            <el-input v-model.trim="form.title" placeholder="请输入公告标题" />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="发布日期" prop="fabuTime">
            <el-date-picker v-model="form.fabuTime" type="date" placeholder="选择日期" value-format="yyyy-MM-dd" style="width:100%;" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="16">
          <el-form-item label="来源URL">
            <el-input v-model.trim="form.source" placeholder="请输入来源URL" />
          </el-form-item>
        </el-col>
      </el-row>

      <el-form-item label="公告内容" prop="neiRong">
        <tinymce ref="tinymceRemark" v-model="form.neiRong" :height="250" />
      </el-form-item>
    </el-form>
    <span slot="footer" class="dialog-footer">
      <div style="text-align:center;">
        <el-button type="primary" @click="onSave">保存</el-button>
        <el-button type="danger" class="quxiao_btn" @click="closePage()">取消</el-button>
      </div>
    </span>
  </div>
</template>

<script>
import { saveNotice } from '@/api/baseNotice'
import { getXiangMuList } from '@/api/projectInfo'
import { getDictListByCode } from '@/api/dict'

import { Message } from 'element-ui'

export default {
  name: 'FuncFormsEdit',
  inject: ['getList'],
  data() {
    return {
      form: {
        id: '',
        title: '',
        type: '',
        neiRong: '',
        fabuTime: ''
      },
      fenleiList: [],
      xmList: [],
      code: '',
      rules: {
        xmId: [
          { required: true, message: '项目名称不能为空', trigger: 'change' }
        ],
        type: [
          { required: true, message: '公告类型不能为空', trigger: 'change' }
        ],
        title: [
          { required: true, message: '公告标题不能为空', trigger: 'change' }
        ],
        fabuTime: [
          { required: true, message: '发布日期不能为空', trigger: 'change' }
        ],
        neiRong: [
          { required: true, message: '内容不能为空', trigger: 'change' }
        ]
      }
    }
  },
  created() {
    this.formatDate()
    this.getXiangMuList()
    this.getDictEntry('CDS_NOTICE_TYPE')
  },
  methods: {
    formatDate() {
      const date = new Date()
      const year = date.getFullYear() // 年
      let month = date.getMonth() + 1 // 月
      month = month < 10 ? '0' + month : month
      let day = date.getDate() // 日
      day = day < 10 ? '0' + day : day
      this.form.fabuTime = `${year}-${month}-${day}`
    },
    getXiangMuList() { // 加载列表
      this.xmList = []

      getXiangMuList().then(response => {
        this.xmList = response.data

        this.listLoading = false
      }).catch(response => {
        this.listLoading = false
      })
    },
    getDictEntry(code) {
      getDictListByCode(code).then(response => {
        if (code === 'CDS_NOTICE_TYPE') {
          this.fenleiList = response.data
        }
      })
    },
    async onSave() {
      this.$refs.form.validate(valid => {
        if (valid) {
          saveNotice(this.form).then(response => {
            Message({
              message: '新增成功',
              type: 'success',
              duration: 5 * 1000
            })
            this.$emit('update:visible', false)
            this.getList()
          })
        } else {
          return false
        }
      })
    },
    closePage() {
      this.$emit('update:visible', false)
    }
  }
}
</script>

